{% extends 'base.html' %}
{% block title %}{{ cat_name }} · 玉器官网{% endblock %}
{% block content %}
<section class="max-w-7xl mx-auto px-4 py-10">
    <h1 class="text-2xl font-semibold">{{ cat_name }}</h1>
    <div class="mt-6 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
        {% for p in products %}
        <a href="/p/{{ p.id }}" class="group block border rounded-lg overflow-hidden hover:shadow">
            <img class="w-full h-56 object-cover" src="{{ p.cover_image|to_public }}" alt="{{ p.t('title', (get_locale()|string)) }}" />
            <div class="p-3">
                <div class="text-sm line-clamp-1">{{ p.t('title', (get_locale()|string)) }}</div>
                {% if p.price %}<div class="text-emerald-700 text-sm mt-1">{{ p.price|fmt_price(p.currency) }}</div>{% endif %}
            </div>
        </a>
        {% endfor %}
    </div>
</section>
{% endblock %}